<template>
  <div id="emoji">
    <!--input输入框-->
    <slot name="input"></slot>
    <!-- <input v-model="inputVal" placeholder="请输入" id="input" class="input" /> -->
    <!--表情包弹出组件-->
    <!--表情包内部结构-->
    <div class="content"  @mouseout="eover">
      <!--循环表情包的类型-->
      <span class="top">1</span>
      <span class="bottom">2</span>
      <ul>
        <hr />
        <li
          class="icon"
          v-for="(item, index) in faceList"
          :key="index"
          @click="icon(index)"
        >
          {{ item.name }}
          <span :class="{ span: true, spcity: index == ind }"></span>
        </li>
      </ul>

      <!--循环表情类型的每一个表情包-->
      <div class="img-div">
        <p
          v-for="(item1, index1) in faceList[tabIndex].iconArr"
          :key="index1"
          @click="clickEmoji(item1.icon)"
        >
          {{ item1.icon }}
        </p>
      </div>
    </div>
  </div>
</template >

<script>
import { emojiArr } from "./emojiArr";

export default {
  data() {
    return {
      faceList: emojiArr, //引入的表情包数组
      tabIndex: 0, //表情包的类型索引
      inputVal: "", // 输入框内的值
      ind: 0
    };
  },
  methods: {
    // 点击表情包
    clickEmoji(val) {
      // 获取文本输入框元素节点
      let ele = document.querySelector(".input");
      // 获取光标
      let cursor = ele.selectionStart;
      // 设置文本内容
      ele.setRangeText(val);
      // 移动光标并聚焦
      ele.selectionStart = cursor + 2;
      ele.focus();
      // 使文本输入框的内容等于当前的值
      this.inputVal = ele.value;
    },
    icon(index) {
      this.ind = index;
      this.tabIndex = index;
    },
    eover() {
      $(".content").hide();
    }
  },
  created() {
    $(document).ready(function() {});
  }
};
</script>

<style>
#emoji {
  position: relative;
}
.content {
  position: absolute;
  width: 500px;
  height: 270px;
  border: 1px solid rgba(5, 132, 216, 0.5);
  overflow: hidden;
  background: white;
  top: 150%;
  z-index: 1;
}
.content > span {
  background: white;
}
.content .top {
  position: absolute;
  top: 0;
  display: block;
  width: 15%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  z-index: 1;
  cursor: pointer;
  box-shadow: -1px 2px 3px rgba(0, 0, 0, 0.1);
}
.content .bottom {
  position: absolute;
  bottom: 0;
  display: block;
  width: 15%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  z-index: 1;
  cursor: pointer;
  box-shadow: -1px -2px 3px rgba(0, 0, 0, 0.1);
}
.content ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 15%;
  height: 75%;
  overflow-y: auto;
  padding-top: 31px;
  padding-bottom: 40px;
  text-align: center;
  scrollbar-width: none;
}
.content ul hr {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  height: 203%;
  background: none;
  border: none;
  z-index: 2;
  border-right: 2px solid #ccc;
}
.content ul::-webkit-scrollbar {
  display: none;
}
.content ul li {
  position: relative;
  height: 40px;
  width: 100.5%;
  list-style: none;
  cursor: pointer;
  color: #333;
  line-height: 40px;
}
.content ul li:hover {
  color: rgb(5, 132, 216);
}
.content ul li span {
  position: absolute;
  right: 0;
  width: 2px;
  height: 100%;
  background: rgb(5, 132, 216);
  z-index: 2;
  opacity: 0;
}
.spcity {
  opacity: 1 !important;
}
.content ul li:nth-child(2) {
  height: 40px;
  list-style: none;
  cursor: pointer;
  color: rgb(5, 132, 216);
  border-right: 2px solid rgb(5, 132, 216);
}
.emo-name {
  width: 15%;
  height: 30px;
  text-align: center;
}
.img-div::-webkit-scrollbar {
  display: none;
}
.img-div {
  position: absolute;
  top: 5px;
  right: -5px;
  bottom: 0;
  width: 85%;
  overflow-y: auto;
  /* scrollbar-width: none; */
  /* float: right; */
}
.img-div p {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
  font-size: 1.5em;
  cursor: pointer;
}
</style>
